<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Shape with Centered Text</title>
</head>
<body>
    <canvas id="myCanvas" width="100" height="150"></canvas>

    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        // Set the fill style for the shape
        ctx.fillStyle = "red";

        // Define the rectangle and corner radius
        const rectX = 0, rectY = 56, rectWidth = 56, rectHeight = 10, cornerRadius = 6;

        // Begin drawing the path for the rectangle
        ctx.beginPath();
        ctx.moveTo(rectX, rectY);
        ctx.lineTo(rectX + rectWidth, rectY); // Top edge
        ctx.lineTo(rectX + rectWidth, rectY + rectHeight - cornerRadius); // Right edge down to start of rounded corner
        ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - cornerRadius, rectY + rectHeight, cornerRadius); // Bottom-right corner
        ctx.lineTo(rectX + cornerRadius, rectY + rectHeight); // Bottom edge
        ctx.arcTo(rectX, rectY + rectHeight, rectX, rectY + rectHeight - cornerRadius, cornerRadius); // Bottom-left corner
        ctx.lineTo(rectX, rectY); // Left edge back to top
        ctx.closePath();
        ctx.fill();

        // Draw the semi-circle (unchanged)
        ctx.beginPath();
        ctx.save();
        ctx.scale(1, 0.2); // Flatten the arc along the y-axis
        ctx.arc(28, 56 / 0.2, 28, Math.PI, 2 * Math.PI); // Adjust the radius and position
        ctx.restore();
        ctx.fill();

        // Add centered text "业务应用" inside the red rectangle
        const text = "业务应用";
        ctx.font = "10px Arial";  // Set font size and type (adjust to fit in the rectangle)
        ctx.fillStyle = "white";  // Set text color (white for contrast)
        ctx.textBaseline = "middle";  // Align text vertically
        ctx.textAlign = "center";  // Align text horizontally

        // Calculate the center of the rectangle
        const textCenterX = rectX + rectWidth / 2;
        const textCenterY = rectY + rectHeight / 2;

        // Draw the text at the center of the rectangle
        ctx.fillText(text, textCenterX, textCenterY);
    </script>
</body>
</html>
